<template>
  <!-- 头部 -->
  <div class="header">
    <div class="title">
      <img src="@/images/icon.png" width="60" height="40" />
      <div class="text">每天一杯喝不腻</div>
    </div>
    <div class="place" @click="toMap">
      南昌绿地缤纷城店
      <van-icon name="arrow" />
    </div>

    <div class="active">
      <div class="left">活动</div>
      <div class="right">
        更多
        <van-icon name="arrow-down" />
      </div>
    </div>
  </div>

  <div class="content">
    <!-- 左边分类 -->
    <div class="content_left">
      <el-scrollbar height="400px">
        <p
          v-for="item in select"
          :key="item"
          @click="to(item.id)"
          class="scrollbar-demo-item"
        >
          {{ item.name }}
        </p>
      </el-scrollbar>
      <br />
      <van-button
        class="routershoppingcar"
        round
        color="linear-gradient(to right, 	#6495ED, #87CEFA)"
        @click="routershopingcar"
      >
        去结算
      </van-button>
    </div>

    <!-- 右边具体 -->
    <div class="content_right">
      <!-- 当季新品 -->
      <div class="page" id="page1">当季新品</div>
      <div
        class="tea"
        @click="todetail(item.name)"
        v-for="item in shop1"
        key="itfem"
      >
        <div class="image">
          <img :src="item.image" width="100" height="100" />
        </div>
        <div class="shop">
          <div class="name">{{ item.name }}</div>
          <div class="detail">{{ item.detail }}</div>
          <div class="teafooter">
            <div class="price">￥{{ item.price }}起</div>
            <van-button type="warning" size="default" class="btn"
              >选规格</van-button
            >
          </div>
        </div>
      </div>

      <!-- 人气推荐 -->
      <div class="page" id="page2" ref="REF">人气推荐</div>
   <div
        class="tea"
        @click="todetail2(item.name)"
        v-for="item in shop2"
        key="itfem"
      >
        <div class="image">
          <img :src="item.image" width="100" height="100" />
        </div>
        <div class="shop">
          <div class="name">{{ item.name }}</div>
          <div class="detail">{{ item.detail }}</div>
          <div class="teafooter">
            <div class="price">￥{{ item.price }}起</div>
            <van-button type="warning" size="default" class="btn"
              >选规格</van-button
            >
          </div>
        </div>
      </div>
      <div class="box"></div>

    </div>
  </div>
  <!-- 弹出层 -->
  <van-popup
    v-model:show="showdetail"
    @close="clickClose"
    round
    closeable
    position="bottom"
    :style="{ height: '70%' }"
  >
    <div class="detail_wrapper">
      <div class="detail_image">
        <img
          :src="res1[0].image"
          style="margin: 20px 0 10px 140px"
          width="120"
          height="100"
        />
      </div>
      <div class="detail_name">{{ res1[0].name }}</div>
      <div class="detail_de">{{ res1[0].detail }}</div>
      <van-divider />
      <div class="format">
        <div class="format_text">规格(*必选):</div>
        <br />
        <button class="select_button" @click="addcup">中</button>

        <div class="format_text">加料(免费三选一):</div>
        <br />
        <button class="select_button" @click="addlittle(0)">多肉</button>
        <button class="select_button" @click="addlittle(1)">珍珠</button>
        <button class="select_button" @click="addlittle(2)">西米</button>
        <button class="select_button" @click="addlittle(3)">取消</button>

        <div class="format_text">去料:</div>
        <br />
        <button class="select_button" @click="deletelittle(0)">去奶盖</button>
        <button class="select_button" @click="deletelittle(1)">去多肉</button>
        <button class="select_button" @click="deletelittle(2)">取消</button>

        <div class="format_text">温度(*必选):</div>
        <br />
        <button class="select_button" @click="tem">沙冰</button>
        <div class="box"></div>
      </div>

      <!-- 结算 -->
      <div class="settlement">
        <van-divider />
        <div class="settlement_price">
          <div class="set_price">￥ {{ countstore.countprices }}</div>
          <div class="count_wrap">
            <button class="createcount" @click="reduce">-</button>
            <div class="count">{{ countstore.count }}</div>
            <button class="createcount" @click="add">+</button>
          </div>
        </div>
        <div class="order_detail">
          {{ countstore.all }}
        </div>
        <div class="exit">
          <van-button type="primary" size="large" @click="exit" class="exitbtn"
            >加入购物车</van-button
          >
        </div>
      </div>
    </div>
  </van-popup>
   <van-popup
    v-model:show="showdetail2"
    @close="clickClose"
    round
    closeable
    position="bottom"
    :style="{ height: '70%' }"
  >
    <div class="detail_wrapper">
      <div class="detail_image">
        <img
          :src="res2[0].image"
          style="margin: 20px 0 10px 140px"
          width="100"
          height="100"
        />
      </div>
      <div class="detail_name">{{ res2[0].name }}</div>
      <div class="detail_de">{{ res2[0].detail }}</div>
      <van-divider />
      <div class="format">
        <div class="format_text">规格(*必选):</div>
        <br />
        <button class="select_button" @click="addcup">中</button>

        <div class="format_text">加料(免费三选一):</div>
        <br />
        <button class="select_button" @click="addlittle(0)">多肉</button>
        <button class="select_button" @click="addlittle(1)">珍珠</button>
        <button class="select_button" @click="addlittle(2)">西米</button>
        <button class="select_button" @click="addlittle(3)">取消</button>

        <div class="format_text">去料:</div>
        <br />
        <button class="select_button" @click="deletelittle(0)">去奶盖</button>
        <button class="select_button" @click="deletelittle(1)">去多肉</button>
        <button class="select_button" @click="deletelittle(2)">取消</button>

        <div class="format_text">温度(*必选):</div>
        <br />
        <button class="select_button" @click="tem">沙冰</button>
        <div class="box"></div>
      </div>

      <!-- 结算 -->
      <div class="settlement">
        <van-divider />
        <div class="settlement_price">
          <div class="set_price">￥ {{ countstore.countprices }}</div>
          <div class="count_wrap">
            <button class="createcount" @click="reduce">-</button>
            <div class="count">{{ countstore.count }}</div>
            <button class="createcount" @click="add">+</button>
          </div>
        </div>
        <div class="order_detail">
          {{ countstore.all }}
        </div>
        <div class="exit">
          <van-button type="primary" size="large" @click="exit2" class="exitbtn"
            >加入购物车</van-button
          >
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import { countStore } from "@/store/count";
import { useRouter } from "vue-router";
export default {
  setup() {
    const showdetail = ref(false);
    const showdetail2 = ref(false);
    let res1 = ref("");
    let res2 = ref("");

    const router = useRouter();
    const countstore = countStore();

    const state = reactive({
      select: [
        { id: 1, name: "当季新品" },
        { id: 2, name: "人气推荐" },
        { id: 3, name: "果茶系列" },
        { id: 4, name: "芝士茗茶" },
        { id: 5, name: "轻乳茶" },
        { id: 6, name: "奶茶家族" },
        { id: 7, name: "料多多" },
        { id: 8, name: "分装小料" },
        { id: 9, name: "用餐提醒" },
      ],

      shop1: [],
      shop2: [],
    

      shops: [
        {
          type: 1,
          name: "超A芝士葡萄",
          price: 12,
          detail: "全新糯米小丸子加麻薯组合",
          image:require("@/images/new1.png")
        },
        {
          type: 1,
          name: "生椰抹茶麻薯",
          price: 13,
          detail: "全新糯米小丸子加麻薯组合",
          image:require("@/images/new2.png")
        },
        {
          type: 1,
          name: "抹茶红豆小丸子",
          price: 14,
          detail: "全新糯米小丸子加麻薯组合",
           image:require("@/images/new3.png")
        },
        {
          type: 1,
          name: "奶茶三拼",
          price: 12,
          detail: "全新糯米小丸子加麻薯组合",
           image:require("@/images/new4.png")
        },
        {
          type: 1,
          name: "嫩仙草满福",
          price: 12,
          detail: "全新糯米小丸子加麻薯组合",
           image:require("@/images/new5.png")
        },

        {
          type: 2,
          name: "淘气乌龙奶芙",
          price: 15,
          detail: "全新糯米小丸子加麻薯组合",
           image:require("@/images/new6.png")
        },
        {
          type: 2,
          name: "布蕾脆脆奶芙",
          price: 16,
          detail: "全新糯米小丸子加麻薯组合",
           image:require("@/images/new7.png")
        },
        {
          type: 2,
          name: "杨枝甘露椰奶",
          price: 17,
          detail: "全新糯米小丸子加麻薯组合",
           image:require("@/images/new8.png")
        },

        {
          type: 2,
          name: "芝士莓莓",
          price: 20,
          detail: "全新糯米小丸子加麻薯组合",
           image:require("@/images/new9.png")
        },
        {
          type: 2,
          name: "杨枝甘露轻盈版",
          price: 15,
          detail: "全新糯米小丸子加麻薯组合",
           image:require("@/images/new10.png")
        },
       
      ],
    });

    // 生命周期中得到商品数据
    onMounted(() => {
      for (let i = 0; i < state.shops.length; i++) {
        if (state.shops[i].type === 1) {
          state.shop1.push(state.shops[i]);
          //  console.log(state.shop1[i].image);
        } else if (state.shops[i].type === 2) {
          state.shop2.push(state.shops[i]);
        } 
       
        // console.log(state.shop2);
      }
    });
    // 原生js获取一个元素到顶部的距离移动到指定的小标题
    const to = (id) => {
      var PageId = document.querySelector("#page" + id);
      window.scrollTo({
        top: PageId.offsetTop - 140,
        behavior: "smooth",
      });
    };
    // 点击某个商品得到这个商品的具体信息
    const todetail = (name) => {
      for (let i = 0; i < state.shop1.length; i++) {
        if (state.shop1[i].name === name) {
          let res = [];
          res.push(state.shop1[i]);
          // console.log(res);
          res1.value = JSON.parse(JSON.stringify(res));
          addcup();
          addlittle(0);
          tem();
          // console.log(res1.value);
        }
      }
      if (countstore.count === 1) {
        countstore.countprices = res1.value[0].price;
      }
      showdetail.value = !showdetail.value;
    };
     const todetail2 = (name) => {
      for (let i = 0; i < state.shop2.length; i++) {
        if (state.shop2[i].name === name) {
          let res = [];
          res.push(state.shop2[i]);
          // console.log(res);
          res2.value = JSON.parse(JSON.stringify(res));
          addcup();
          addlittle(0);
          tem();
          // console.log(res1.value);
        }
      }
      if (countstore.count === 1) {
        countstore.countprices = res2.value[0].price;
      }
      showdetail2.value = !showdetail2.value;
    };
    // 关闭弹出层将store的数量重置
    const clickClose = () => {
      if (countstore.count > 1) {
        countstore.count = 1;
      }
    };
    // 指定规格
    const addcup = () => {
      if (countstore.all.indexOf("中") == -1) {
        countstore.all.push("中");
      }
    };
    // 想要添加的小料
    const addlittle = (type) => {
      if (
        type === 0 &&
        (countstore.all.indexOf("珍珠") !== -1 ||
          countstore.all.indexOf("西米") !== -1 ||
          countstore.all[1] !== "")
      ) {
        countstore.all.splice(1, 1);
        if (countstore.all.indexOf("多肉") == -1)
          countstore.all.splice(1, 0, "多肉");
      } else if (
        type === 1 &&
        (countstore.all.indexOf("多肉") !== -1 ||
          countstore.all.indexOf("西米") !== -1 ||
          countstore.all[1] !== "")
      ) {
        countstore.all.splice(1, 1);
        if (countstore.all.indexOf("珍珠") == -1)
          countstore.all.splice(1, 0, "珍珠");
      } else if (
        type === 2 &&
        (countstore.all.indexOf("珍珠") !== -1 ||
          countstore.all.indexOf("多肉") !== -1 ||
          countstore.all[1] !== "")
      ) {
        countstore.all.splice(1, 1);
        if (countstore.all.indexOf("西米") == -1)
          countstore.all.splice(1, 0, "西米");
      } else if (type == 3) {
        if (countstore.all[1] !== "") {
          countstore.all.splice(1, 1);
        }
      }
    };
    // 想去掉的小料
    const deletelittle = (type) => {
      if (
        type == 0 &&
        (countstore.all !== "" || countstore.all.indexOf("去多肉") == -1)
      ) {
        if (countstore.all[1] === "去多肉") countstore.all.splice(1, 1);
        if (countstore.all[2] === "去多肉") countstore.all.splice(2, 1);
        if (countstore.all.indexOf("去奶盖") == -1)
          countstore.all.splice(2, 0, "去奶盖");
      }
      if (
        type == 1 &&
        (countstore.all !== "" || countstore.all.indexOf("去奶盖") == -1)
      ) {
        if (countstore.all[1] === "去奶盖") countstore.all.splice(1, 1);
        if (countstore.all[2] === "去奶盖") countstore.all.splice(2, 1);
        if (countstore.all.indexOf("去多肉") == -1)
          countstore.all.splice(2, 0, "去多肉");
      }
      if (type === 2) countstore.all.splice(2, 1);
    };
    // 温度选择
    const tem = () => {
      if (countstore.all !== "" && countstore.all.indexOf("沙冰") == -1) {
        countstore.all.push("沙冰");
      }
    };
    // 点击加入购物车按钮
    const exit = () => {
      showdetail.value = false;
      let addshopingcar = {
        name: res1.value[0].name,
        detail: countstore.all,
        price: countstore.countprices,
        count: countstore.count,
        src:res1.value[0].image,
        selectType:false
      };
      countstore.shopingcar.push(addshopingcar);
      let a = JSON.parse(JSON.stringify(countstore.shopingcar));
      // console.log(a);
      // console.log(countstore.shopingcar);
      if (countstore.count > 1) {
        countstore.count = 1;
      }
    };
     const exit2 = () => {
      showdetail2.value = false;
      let addshopingcar = {
        name: res2.value[0].name,
        detail: countstore.all,
        price: countstore.countprices,
        count: countstore.count,
        src:res2.value[0].image,
        selectType:false
      };
      countstore.shopingcar.push(addshopingcar);
      let a = JSON.parse(JSON.stringify(countstore.shopingcar));
      // console.log(a);
      // console.log(countstore.shopingcar);
      if (countstore.count > 1) {
        countstore.count = 1;
      }
    };
    // 点击地点得到地图(未完善)
    const toMap = () => {
      router.push("/place")
    }
    // 去结算按钮
    const routershopingcar = () => {
      router.push("/shop");
    };
    // 点击减号
    const reduce = () => {
      if (countstore.count > 1) {
        countstore.count--;
        countstore.countprices = res1.value[0].price * countstore.count;
      }
    };
    // 点击加号
    const add = () => {
      countstore.count++;
      countstore.countprices = res1.value[0].price * countstore.count;
      // console.log(countstore.countprices);
    };
    return {
      ...state,
      res1,
      res2,
      showdetail,
      showdetail2,
      countstore,
      toMap,
      clickClose,
      to,
      todetail,
      todetail2,
      addcup,
      addlittle,
      deletelittle,
      tem,
      exit,
      exit2,
      routershopingcar,
      add,
      reduce,
    };
  },
};
</script>

<style scoped>
.header {
  width: 725px;
  position: fixed;
  padding: 13px;
  border-bottom: 1px solid rgb(165, 163, 163);
  background: rgb(216, 220, 221);
  z-index: 4;
}
.title {
  display: flex;
}
.settlement {
  width: 748px;
  background-color: #fff;
  position: fixed;

  top: 80%;
}
.text {
  font-size: 20px;
  color: #1a1a1a;
  opacity: 0.8;
}
.place {
  margin: 2px;
  font-size: 22px;
  letter-spacing: 4px;
}
.order_detail {
  margin-bottom: 10px;
}
.active {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
}
.content {
  display: flex;
}
.content_left {
  position: fixed;
  margin-top: 235px;
}
.content_right {
  margin-left: 200px;
  margin-top: 245px;
}
.right {
  font-size: 10px;
}
.tea {
  display: flex;
  margin: 5px 0 5px 30px;
  width: 500px;
  height: 210px;
  border: 1px solid #000;
}
.name {
  font-size: 15px;
}
.image {
  padding: 5px;
}
.detail {
  font-size: 10px;
  opacity: 0.6;
  margin: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.teafooter {
  display: flex;
  justify-content: space-between;
  margin-top:10% ;
}
.price {
  margin-top: 6%;
  font-size: 14px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
.btn {
  width: 120px;
  height: 60px;

  margin-right: 8px;
  border-radius: 14px;
}
.count_wrap {
  display: flex;
  margin-right: 10px;
  margin-top: 16px;
}
.count {
  margin-top: 16px;
  margin: 16px 20px 0 20px;
}
.createcount {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 1px solid #000;
  border-radius: 20px;
  color: #fff;
  background-color:#FF976A;
}
.scrollbar-demo-item {
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  margin: 10px;
  padding: 5px;
  text-align: center;
  border-radius: 4px;
  background: #fff;
  color: rgb(133, 135, 136);
  opacity: 0.8;
}
.exitbtn {
  height: 100px;
  font-size: 20px;
}
.page {
  margin-left: 30px;
  font-size: 15px;
  color: rgb(143, 143, 143);
  opacity: 0.9;
}

.box {
  width: 300px;
  height: 300px;
}
.detail_name {
  margin: 10px 5px;
}
.detail_de {
  font-size: 12px;
  margin: 20px 5px;
}
.select_button {
  width: 130px;
  height: 60px;
  text-align: center;
  margin: 10px 0 0 30px;
  border-radius: 10px;
  border: 1.5px solid rgb(224, 214, 78);
  background-color: rgb(232, 226, 226);
  opacity: 0.8;
  color: rgb(37, 39, 37);
}
.set_price {
  margin: 20px;
}
/* .settlement {
  position: fixed; 
} */
.settlement_price {
  display: flex;
  justify-content: space-between;
}

.format_text {
  margin-left: 20px;
  margin-top: 20px;
  letter-spacing: 5px;
}
.routershoppingcar {
  margin-left: 20px;
  width: 140px;
  height: 80px;
}
van-popup {
  z-index: 99;
}
</style>